<template>
	<div class="dialog-body" ref="dialogBody">
		<div v-if="!aiDialogList.length" class="welcome-msg">
			<img :src="aiIcon"  class="logo-img"/>
			<div>嗨！我是核保百事通</div>
			<div>我可以帮你分析检查报告，智能评估核保建议，请你把任务交给我吧~</div>
		</div>
		<div v-else class="dialog-msg-list">
			<div
				v-for="(item, index) of aiDialogList" :key="index"
				class="msg-item-wrap" :class="{right:  item.message_type === '2'}">
				<!--左边-->
				<div v-if="item.message_type === '1'" class="msg-item">
					<img :src="aiIcon"  class="header-img"/>
					<div v-html="item.message.content" class="msg markdown-body"></div>
				</div>
				<!--右边-->
				<div v-else class="msg-item right">
					<!--普通文本-->
					<div class="msg right" v-html="item.message.content.replace(/\n/g, '<br />')"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import "@/styles/github-markdown.css"
import "highlight.js/styles/a11y-light.css";
import { mapState, mapMutations } from "vuex"
import aiIcon from '@/assets/images/ai-icon.png'
export default {
	name: 'DialogBody',
	components: {
	},
	data() {
		return {
			aiIcon,
		}
	},
	computed: {
		...mapState(['aiDialogList', 'scrollDialogMessage']),
	},
	watch: {
		scrollDialogMessage(val) {
			if (val) {
				this.scrollToBottom()
				this.setScrollDialogMessage(false)
			}
		}
	},
	mounted() {
		
	},
	methods: {
		...mapMutations(['setScrollDialogMessage']),
		// 滚动到底部
		scrollToBottom() {
			let dialogBody = this.$refs.dialogBody
			dialogBody.scroll({
				top: dialogBody.scrollHeight,
				// behavior: 'smooth'
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.dialog-body{
	flex:1;
	overflow: hidden auto;
	overflow-y: overlay;
	padding: 24px 20px;
	.welcome-msg{
		padding: 60px 60px 0;
		text-align: center;
		.logo-img{
			width: 120px;
		}
	}
	.msg-item-wrap{
		display: flex;
		padding: 16px 0;
		&.right{
			justify-content: flex-end;
		}
		.msg-item{
			width: calc(100% - 80px);
			display: flex;
			&.right{
				flex-direction: row-reverse;
			}
			.header-img{
				width: 60px;
				height: 60px;
				margin-right: 20px;
				&.right{
					margin-left: 20px;
					margin-right: 0px;
				}
			}
			.msg{
				background: #fff;
				border: 2x solid rgba(228,241,255,1);
				border-radius: 8px;
				padding: 16px 24px;
				line-height: 36px;
				color: #434343;
				max-width: calc(100% - 80px);
				&.right{
					border: 0;
					background: #EDF5FF;
				}
			}
		}
	}
}
</style>